<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>

    // 常见的this指向:
    // (1) 一般情况下,普通函数this->window (函数调用时没有依存的对象)
    // (2) 函数调用时属于谁就指向谁 (有依存的对象)  obj.sum  document.onclick
    // (3) 箭头函数没有自己的this对象 => 内部的this就是定义时上层作用域中的this
    //     箭头函数中遇到this,就向外跳一层,找父作用域总的this指向,如果父作用域也是箭头函数继续向外跳一层,依次类推,最终找不到跳到全局作用域 this->window

    // function fn() {
    //     console.log(this);
    // }

    // var obj = {
    //     a: 1,
    //     b: 2,
    //     sum: function () {
    //         console.log(this, this.a, this.b);
    //         return this.a + this.b;
    //     }
    // }

    // document.onclick = function () {
    //     console.log(this); // this -> document
    // }

    // fn();  // this -> window
    // obj.sum();  // this -> obj


    // 一层箭头函数  => 直接向外跳一层 this->window

    var fn = () => {
        console.log(this);
    }

    var obj = {
        a: 1,
        b: 2,
        sum: () => {
            console.log(this, this.a, this.b);
            return this.a + this.b;
        }
    }

    document.onclick = () => {
        console.log(this); // this -> window
    }

    fn();  // this -> window
    obj.sum();  // this -> window






</script>

</html>